<template>
	<view>
		<cu-custom bgColor="bg-cyan"	isBack>
		  <block slot="content">Flex 演示</block>
		</cu-custom>
		<view class="text">
			使用 Flex 布局
		</view>
		<view class="content">
			Flex 布局是子元素同一行显示
		</view>
		<view class="flex">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			Flex 子元素个数超出行宽仍同一行显示
		</view>
		<view class="flex">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
		</view>
		<view class="content">
			Flex 改变排版方向
		</view>
		<view class="content">
			flex-direction: row; 默认排版
		</view>
		<view class="flex-row">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			flex-direction: row-reverse; 从右到左排版
		</view>
		<view class="flex-row-reverse">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			flex-direction: column; 竖直排版
		</view>
		<view class="flex-column">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			flex-direction: row-reverse; 倒叙竖直排版
		</view>
		<view class="flex-column-reverse">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		
		<view class="text">
			Flex-warp 换行显示
		</view>
		<view class="content">
			默认值 nowarp 不换行
		</view>
		<view class="content">
			flex-wrap: wrap; 换行
		</view>
		<view class="flex-warp">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
		</view>
		<view class="content">
			flex-wrap: wrap-reverse; 倒叙换行
		</view>
		<view class="flex-warp-reverse">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
		</view>
		<view class="text">
			justify-content 主轴排版
		</view>
		<view class="content">
			justify-content: flex-start; 靠左
		</view>
		<view class="flex-start">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			justify-content: center; 靠中
		</view>
		<view class="flex-center">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			justify-content: flex-end; 靠右
		</view>
		<view class="flex-end">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
		</view>
		<view class="content">
			justify-content: space-around; 子元素间隔相等
		</view>
		<view class="space-around">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>		
		</view>
		<view class="content">
			justify-content: space-between; 两端对齐
		</view>
		<view class="space-between">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="text">
			align-items辅轴
		</view>
		<view class="content">
			Flex-start 顶端对齐
		</view>
		<view class="box aif-start">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="content">
			center居中对齐
		</view>
		<view class="box aif-center">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="content">
			Flex-end底部对齐
		</view>
		<view class="box aif-end">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="content">
			stretch辅满辅轴
		</view>
		<view class="box aif-stretch">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="content">
			baseline第一行文字基线对齐
		</view>
		<view class="box aif-baseline">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
		</view>
		<view class="text">
			align-content
		</view>
		<view class="content">
			flex-start辅轴顶部显示
		</view>
		<view class="box ac-start">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
			<view class="flex-item">G</view>
			<view class="flex-item">H</view>
			<view class="flex-item">I</view>
		</view>
		<view class="content">
			center辅轴居中
		</view>
		<view class="box ac-center">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
			<view class="flex-item">G</view>
			<view class="flex-item">H</view>
			<view class="flex-item">I</view>
		</view>
		<view class="content">
			end辅轴居下
		</view>
		<view class="box ac-end">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
			<view class="flex-item">G</view>
			<view class="flex-item">H</view>
			<view class="flex-item">I</view>
		</view>
		<view class="content">
			space-around辅轴间隔相同
		</view>
		<view class="box ac-around">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
			<view class="flex-item">G</view>
			<view class="flex-item">H</view>
			<view class="flex-item">I</view>
		</view>
		<view class="content">space-between辅轴上下两端对齐</view>
		<view class="box ac-between">
			<view class="flex-item">A</view>
			<view class="flex-item">B</view>
			<view class="flex-item">C</view>
			<view class="flex-item">D</view>
			<view class="flex-item">E</view>
			<view class="flex-item">F</view>
			<view class="flex-item">G</view>
			<view class="flex-item">H</view>
			<view class="flex-item">I</view>
		</view>
		<view class="text">Flex子属性flex-grow属性</view>
		<view class="content">利用flex-grow均分行宽</view>
		<view class="flex">
			<view class="grow">A</view>
			<view class="grow">B</view>
			<view class="grow">C</view>
			<view class="grow">D</view>
		</view>
		<view class="text">
			Flex子属性flex-grow属性
		</view>
		<view class="content">
			利用flex-grow按比例分隔
		</view>
		<view class="flex rate">
			<view class="grow">A</view>
			<view class="grow">B</view>
			<view class="grow">C</view>
		</view>
	</view>
</template>

<script>
</script>

<style>
	@import "./flex.css";
</style>